<template>
  <div class="app-container">
    <!--主列表开始-->
    <!--搜索-->
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="考试名称" prop="examName">
        <el-input v-model="queryParams.examName" placeholder="请输入考试名称"
          clearable size="small" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--按钮区-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple">删除</el-button>
      </el-col>
    </el-row>
    <!--表格区-->
    <el-table v-loading="loading" :data="examList"
              @selection-change="handleSelectionChange" row-key="id"
              @expand-change="expandRow" :expand-row-keys="expandRowKeys">
      <!--考试班级子表格开始-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="examClassList" v-loading="classLoading"
                    :header-cell-style="{ background: '#02b64a', color: '#ffffff' }">
            <el-table-column label="序号" align="center" prop="classId"/>
            <el-table-column label="班级名称" align="center" prop="className"/>
            <el-table-column label="操作" align="center" width="400">
              <template slot-scope="scope" >
                <el-link icon="el-icon-edit" type="primary" @click="scoreEntry(scope.row.classId,props.row.id,'2')">专业成绩录入</el-link>
                <el-link icon="el-icon-edit" type="primary" @click="scoreEntry(scope.row.classId,props.row.id,'1')">文化成绩录入</el-link>
                <el-link icon="el-icon-tickets" type="primary" @click="totalScoreCount(scope.row.classId,props.row.id)">总成绩统计</el-link>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!--考试班级子表格结束-->

      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="考试名称" align="center" prop="name"/>
      <el-table-column label="考试日期" align="center" prop="examDate"/>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <el-table-column label="是否发布" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isRelease" :active-value="true" :inactive-value="false"
            @change="handleReleaseChange(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160"/>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope" >
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button size="mini" circle type="success"
                       icon="el-icon-edit" @click="handleEdit(scope.row.id)"/>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button size="mini" circle type="danger"
                       icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total"
      :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>


    <!--新增修改考试弹窗-->
    <el-dialog title="考试编辑" :visible.sync="examDialogVisible"  v-if="examDialogVisible" width="50%">
      <edit-exam :examId="editExamId" @editExamSuccess="editExamSuccess"/>
    </el-dialog>

    <!--班级考试成绩录入弹窗-->
    <el-dialog :title="scoreEntryTitle" :visible.sync="scoreDialogVisible"  v-if="scoreDialogVisible" width="70%">
      <edit-exam-score :examId="editExamId" :classId="editClassId"
                       :courseType="editCourseType" @editScoreSuccess="editScoreSuccess"/>
    </el-dialog>

    <!--班级考试成绩统计弹窗-->
    <el-dialog title="总成绩统计" :visible.sync="totalCountDialogVisible"  v-if="totalCountDialogVisible" width="50%">
      <class-total-score-count :examId="editExamId" :classId="editClassId" />
    </el-dialog>
  </div>
</template>

<script>
import { getList,delExam,getExamClassList,updateExamRelease } from '@/api/exam/exam'
import EditExam from '@/views/academic/exam/editExam.vue'
import EditExamScore from '@/views/academic/exam/editExamScore.vue'
import ClassTotalScoreCount from '@/views/academic/exam/classTotalScoreCount.vue'

export default {
  name: "exam",
  components: { EditExamScore, EditExam, ClassTotalScoreCount },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        examName:undefined
      },
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: false,
      // 数据列表
      examList: [],
      // 总条数
      total: 0,
      // 选中数组
      selIds: [],
      // 考试列表展开行的数组
      expandRowKeys: [],
      //编辑考试弹窗
      examDialogVisible : false,
      //成绩录入弹窗
      scoreDialogVisible : false,
      //成绩录入弹窗标题
      scoreEntryTitle : '',
      //班级成绩统计弹窗
      totalCountDialogVisible : false,

      //考试班级数据列表
      examClassList : [],
      // 考试班级遮罩层
      classLoading : false,

      //编辑班级id
      editClassId : '',
      //编辑考试id
      editExamId : '',
      //编辑课程类型
      editCourseType: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 考试列表-分页查询 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((response) => {
        this.examList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    /** 考试列表-搜索按钮操作 */
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 考试列表-重置按钮操作 */
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.handleQuery();
    },
    /** 考试列表-多选*/
    handleSelectionChange(selection) {
      this.selIds = selection.map(item => Number(item.id))
      this.multiple = !selection.length;
    },
    /** 考试列表-删除 */
    handleDelete(row) {
      const ids = row.id || this.selIds;
      this.$confirm('是否删除选中考试信息,删除后和该考试相关的数据都将被删除!', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delExam(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 考试列表-发布 */
    handleReleaseChange(row) {
      let text = row.isRelease ? "发布" : "收回";
      this.$confirm(
        '确认要' + text + '该考试吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(function() {
        return updateExamRelease(row.id,row.isRelease);
      }).then(() => {
          this.msgSuccess(text + "成功");
          this.getList();
      }).catch(function() {
          row.isRelease = !row.isRelease;
      });
    },
    /** 考试列表-新增 */
    handleAdd() {
      this.editExamId = '';
      this.examDialogVisible = true;
    },
    /** 考试列表-编辑 */
    handleEdit(id) {
      this.editExamId = id;
      this.examDialogVisible = true;
    },
    /** 考试列表-新增修改成功回调 */
    editExamSuccess() {
      this.examDialogVisible = false;
      this.getList();
    },
    /** 考试列表-展开节点 */
    expandRow(row,expandedRows) {
      if (expandedRows.length) {
        this.expandRowKeys = [row.id]; // 只保留当前点击的行
      } else {
        this.expandRowKeys = []; // 关闭所有行时清空数组
      }
      this.getExamClassList(row.id);
    },

    /** 考试班级子列表-查询列表*/
    getExamClassList(id) {
      this.classLoading = true;
      getExamClassList(id).then(res=> {
        this.classLoading = false;
        this.examClassList = res.data;
      })
    },
    /** 考试班级子列表-成绩录入*/
    scoreEntry(classId,examId,courseType) {
      if (courseType === '1') {
        this.scoreEntryTitle = '文化成绩录入';
      }else if (courseType === '2') {
        this.scoreEntryTitle = '专业成绩录入';
      }

      this.editExamId = examId;
      this.editClassId = classId;
      this.editCourseType = courseType;
      this.scoreDialogVisible = true;
    },
    /** 考试班级子列表-成绩录入成功回调 */
    editScoreSuccess() {
      this.getExamClassList(this.expandRowKeys[0]);
    },
    /** 考试班级子列表-总成绩统计 */
    totalScoreCount(classId,examId) {
      this.editExamId = examId;
      this.editClassId = classId;
      this.totalCountDialogVisible = true;
    }
  },
};
</script>
